<template>
  <Component
    v-show="mappingProps.visible"
    ref="refComponent"
    class="t-icon"
    :aria-hidden="false"
    v-bind="{ ...attrs, ...mappingProps }"
    @click="handleClick"
  >
    <slot></slot>
  </Component>
</template>

<script setup>
  import Component from '@teld/q-components/Icon';
  import useMappingProps from 't/common/hooks/useMappingProps';
  import { commonProps } from 't/common/utils';
  import { ref, useAttrs } from 'vue';
  const refComponent = ref();
  const attrs = useAttrs();
  const props = defineProps({
    ...commonProps,
    ...Component.props,
  });
  const [mappingProps, mappingExpose] = useMappingProps(props);
  defineExpose(mappingExpose);

  // == 事件 ==
  const emit = defineEmits(['click']);
  const handleClick = params => {
    emit('click', params);
  };
</script>
